<template>
  <div>
    <el-badge 
      v-for="(item,index) in randomSize" 
      :key="index" :value="fill(item)" 
      :type="getType(index)"  
      class="item"
      @click.native="gotoIndex(item-1)"
      >
    </el-badge>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      total: 30,
      current: 1
    };
  },
  methods: {
    ...mapMutations("test", ["SET_INDEX"]),
    gotoIndex(index) {
      this.SET_INDEX(index);
    },
    fill(num) {
      return num < 10 ? "0" + num : num;
    },
    getType(idx) {
      let type = "info";
      const questionObj = this.list[idx];
      console.log(questionObj);
      if (questionObj.checkList) {
        if (questionObj.checkList == questionObj.answers) {
          type = "success";
        } else {
          type = "danger";
        }
      } else {
        type = "info";
      }
      if (this.index == idx) {
        type = "primary";
      }
      return type;
    }
  },
  computed: {
    ...mapState("test", ["index", "randomSize", "list"]),
    ...mapGetters("test", ["currentQuestion", "randomList"])
  }
};
</script>

<style scoped>
.el-badge {
  cursor: pointer;
}
</style>